<div class="ngm-property-array__container flex flex-col justify-start items-stretch"
  cdkDropList
  (cdkDropListDropped)="drop($event)">

  <button *ngIf="isEmpty" mat-button color="primary" (click)="add()">
    {{ 'COMPONENTS.PROPERTY.ADD_DIMENSION' | translate: {Default: 'Add Dimension'} }}
  </button>

  <ngm-property-select class="group" cdkDragBoundary=".ngm-property-array__container" cdkDrag
    *ngFor="let item of formArray.controls; let i = index"
    [formControl]="$any(item)"
    [dataSettings]="dataSettings"
    [entityType]="entityType"
    [coreService]="coreService"
    [dsCoreService]="dsCoreService"
    [capacities]="capacities"
  >
    <mat-icon ngmPrefix cdkDragHandle>drag_indicator</mat-icon>

    <button ngmSuffix mat-icon-button color="warn" class="opacity-0 group-hover:opacity-100" displayDensity="compact"
      (click)="remove(i); $event.stopPropagation(); $event.preventDefault()">
      <mat-icon>clear</mat-icon>
    </button>

  </ngm-property-select>
</div>

<button *ngIf="!isEmpty" class="add" mat-button color="primary" ngmAppearance="dashed" (click)="add()">
  {{ 'COMPONENTS.PROPERTY.ADD_DIMENSION' | translate: {Default: 'Add Dimension'} }}
</button>
